<script lang="ts" setup>
import { ref } from "vue";
import { UserSettingType } from "@/typing";
import { useRouter } from 'vue-router'
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { userLocalStoriesStore } from "../../store";

const router = useRouter()
const userStore = userLocalStoriesStore();
const {updateIsLogin,updateIsShowUser,updateMyUserNowData } = userStore;

const settingobj = ref<Array<UserSettingType>>();
settingobj.value = [
    {
        title: '设置',
        arr: [{
            text: '夜间模式',
            type: 1,
            checked: false
        },
        {
            text: '流量播放提醒',
            type: 1,
            checked: true
        },
        {
            text: '清除缓存',
            type: 0
        },
        {
            text: '推送通知',
            type: 1,
            checked: true
        }]
    },
    {
        title: '隐私',
        arr: [{
            text: '隐藏小记',
            type: 1,
            checked: true
        },
        {
            text: '隐藏歌单',
            type: 1,
            checked: false
        },
        {
            text: '隐藏其他收藏',
            type: 1,
            checked: false
        }]
    },
    {
        title: '反馈',
        arr: [{
            text: '投稿方式',
            type: 0
        },
        {
            text: '意见与反馈',
            type: 0
        },
        {
            text: '关注我们',
            type: 0
        },
        {
            text: '商务合作联系',
            type: 0
        },
        {
            text: '给一个评分',
            type: 0
        },
        {
            text: '一个安全中心',
            type: 0
        }
        ]
    },
    {
        title: '关于',
        arr: [{
            text: '用户协议',
            type: 0
        },
        {
            text: '隐私政策',
            type: 0
        },
        {
            text: '第三方SDK目录与共享清单',
            type: 0
        },
        {
            text: '版本号',
            type: 0
        }]
    },
]

function goBackFunc() {
    updateIsShowUser(false);
    router.push({ name: 'user' });
}

function goToLoginView() {
    updateIsLogin(false);
    updateMyUserNowData(false);
    router.push({ name: 'login' });
    Toast.loading({
        message: '正在退出...',
        forbidClick: true,
    });
}
</script>

<template>
    <div class=" bg-gray-50">
        <div class="p-5 flex items-center mb-5 bg-white">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-2xl w-11/12 ">设置</div>
         
        </div>

        <div v-for="(s, index) in settingobj" :key="index" class="mb-8">
            <div class="pl-8 mb-3 text-gray-400">{{ s.title }}</div>
            <div v-for="(l, i) in s.arr" :key="i"
                class=" px-8 flex justify-between py-5 border-b items-center bg-white">
                <div class="font-text">{{ l.text }}</div>
                <div class="relative" :class="l.checked === true ? 'set-check' : ''">
                    <img v-if="l.type === 0" class="w-10 h-10" src="@/assets/user/forward.png" alt="img">
                    <img v-if="l.type !== 0" class="w-10 h-10" src="@/assets/user/attention_sportq_bg.png" alt="img">
                </div>

            </div>
        </div>

        <div class="p-8 bg-white font-text" @click="goToLoginView">退出登录</div>
    </div>
</template>

<style>
.font-text {
    font-size: 15px !important;
}

.set-check::after {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    content: '';
    height: 20px;
    width: 20px;
    background-image: url("@/assets/user/checkbox_click.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
}
</style>